<!-- 活动规则通用弹窗 -->
<template>
  <!-- 提示弹窗 -->
  <uni-popup ref="popup">
    <div class="content">
      <div class="title">成员积分</div>
      <div class="table">
        <div class="t-head">
          <div class="row">
            <div class="t-cell">成员</div>
            <div class="t-cell">积分</div>
          </div>
        </div>
        <div class="t-body">
          <div class="row" v-for="item in teamMemberList" :key="item.userId">
            <div class="t-cell">
              <image class="avatar" :src="item.avatar" alt="" />
              {{ item.nickname }}
            </div>
            <div class="t-cell red">{{ item.score }}</div>
          </div>
        </div>
      </div>
      <div class="check-btn" @click="close">我知道了</div>
    </div>
    <!-- 关闭按钮 -->
    <div class="close-btn" @click="close">
      <image
        class="close-btn-img"
        src="@/static/icons/common/close.png"
        alt=""
      />
    </div>
  </uni-popup>
</template>

<script setup lang="ts">
/** 当前组件实例 */
const currentInstance = getCurrentInstance();

// 成员积分列表数据
defineProps<{
  teamMemberList: {
    userId: string;
    avatar: string;
    nickname: string;
    score: number;
  }[];
}>();

/** 弹窗打开 */
const open = () => {
  const popup = currentInstance?.refs.popup as UniHelper.UniPopupInstance;
  if (popup.open) {
    popup.open();
  }
};

/** 弹窗关闭 */
const close = () => {
  const popup = currentInstance?.refs.popup as UniHelper.UniPopupInstance;
  if (popup.close) {
    popup.close();
  }
};

defineExpose({
  open,
  close,
});
</script>

<style scoped lang="scss">
.content {
  width: 658rpx;
  height: 981rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 38rpx;
  position: relative;
  background: linear-gradient(180deg, #d0edff, #ffffff 100%);
  border-radius: 31rpx;
  .title {
    font-size: 38rpx;
    font-weight: 400;
    color: #333333;
  }
  .table {
    margin-top: 30rpx;
    width: 619rpx;
    .t-head {
      background-color: #f9f9f9;
      border-top-left-radius: 8rpx;
      border-top-right-radius: 8rpx;
      font-size: 23rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.4);
      .row {
        height: 71rpx;
        display: flex;
        .t-cell {
          width: 50%;
          height: 100%;
          text-align: center;
          line-height: 71rpx;
        }
      }
    }
    .t-body {
      font-size: 23rpx;
      font-weight: 400;
      color: #000000;
      .row {
        height: 66rpx;
        display: flex;
        background-color: #f9f9f9;
        .t-cell {
          width: 50%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          column-gap: 10rpx;
          .avatar {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
          }
          &.red {
            color: #ff403c;
          }
        }
        &:nth-child(odd) {
          background-color: #fff;
        }
      }
    }
  }
  .check-btn {
    font-size: 29rpx;
    font-weight: 500;
    color: #ffffff;
    width: 462rpx;
    height: 69rpx;
    background: linear-gradient(270deg, #864ce4 0%, #272fd9);
    border-radius: 65rpx;
    text-align: center;
    line-height: 69rpx;
    position: absolute;
    bottom: 38rpx;
  }
}
// 关闭按钮
.close-btn {
  position: absolute;
  width: 65rpx;
  height: 65rpx;
  left: 296rpx;
  bottom: -102rpx;
  z-index: 1;
  .close-btn-img {
    width: 100%;
    height: 100%;
  }
}
</style>
